<template>
  <div class="container">
    <div class="left">
      <div class="item" @click="authStore.type = 0">
        <img
          :src="
            authStore.type === 0
              ? 'https://hzyczn.52br.net/images/h5/icon/shangmen-active.png'
              : 'https://hzyczn.52br.net/images/h5/icon/shangmen.png'
          "
          alt=""
        />
        <span>上门取货</span>
      </div>
      <div class="item" @click="authStore.type = 1">
        <img
          :src="
            authStore.type === 1
              ? 'https://hzyczn.52br.net/images/h5/icon/ziqu-active.png'
              : 'https://hzyczn.52br.net/images/h5/icon/ziqu.png'
          "
          alt=""
        />
        <span>到店自取</span>
      </div>
    </div>
    <div class="right">
      <div v-for="item in list" :key="item.id" class="item">
        <div class="leftImg" @click="showDetails(item)">
          <img :src="item.src" alt="" />
        </div>
        <div class="rightContent">
          <div class="rightTop">
            <span>{{ item.name }}</span>
            <p>高端洗涤,多重消毒</p>
          </div>
          <div class="rightBottom">
            <span
              >￥<b>{{ item.price }}</b></span
            >
            <button
              @click="
                carStore.addCar({
                  name: item.name,
                  id: item.id,
                  total: 1,
                  price: item.price,
                  src: item.src
                })
              "
            >
              立即清洗
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="more" @click="goMore">
    查看更多
    <img src="https://hzyczn.52br.net/images/h5/icon/more.png" alt="" />
  </div>
  <van-overlay :show="show" @click="show = false" />
  <div class="prodetail" v-if="show">
    <productDetails :item="GoodsId" :off="offModel"></productDetails>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCarStore } from '@/stores'
import { useAuthStore } from '@/stores'
import productDetails from '@/components/productDetails/index.vue'
// 查看更多操作
const router = useRouter()
const activeIndex = ref(0)
const goMore = () => {
  router.push({
    name: 'more',
    query: {
      id: activeIndex.value
    }
  })
}
// 购物车store
const carStore = useCarStore()
// 用户store
const authStore = useAuthStore()
// 列表数据
const list: any = ref()
if (authStore.state === 0) {
  list.value = [
    {
      id: 5,
      name: '奢侈品鞋靴/潮鞋',
      total: 1,
      price: 135,
      src: 'https://hzyczn.52br.net/images/h5/img/s1.png'
    },
    {
      id: 6,
      name: '运动鞋/皮鞋',
      total: 1,
      price: 168,
      src: 'https://hzyczn.52br.net/images/h5/img/s2.png'
    },
    {
      id: 7,
      name: '磨砂鞋/绒面鞋',
      total: 1,
      price: 135,
      src: 'https://hzyczn.52br.net/images/h5/img/s3.png'
    },
    {
      id: 8,
      name: '皮靴/雪地靴',
      total: 1,
      price: 111,
      src: 'https://hzyczn.52br.net/images/h5/img/s4.png'
    }
  ]
} else {
  list.value = [
    {
      id: 1,
      name: '羽绒服(短款)',
      total: 1,
      price: 45,
      src: 'https://hzyczn.52br.net/images/h5/img/c1.png'
    },
    {
      id: 2,
      name: '羽绒服(长款)',
      total: 1,
      price: 59,
      src: 'https://hzyczn.52br.net/images/h5/img/c2.png'
    },
    {
      id: 3,
      name: '呢子衣（短款）)',
      total: 1,
      price: 88,
      src: 'https://hzyczn.52br.net/images/h5/img/c3.png'
    },
    {
      id: 4,
      name: '呢子衣（长款）',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c4.png'
    }
  ]
}
// 展示商品详情
const show = ref(false)
const GoodsId = ref()
const showDetails = (item: any) => {
  GoodsId.value = item
  show.value = true
}
// 关闭模态框
const offModel = () => {
  show.value = false
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  padding: 0 2vw;
  margin-top: 4vw;
  margin-bottom: 4vw;
  box-sizing: border-box;
  .left {
    width: 23vw;
    display: flex;
    flex-direction: column;
    gap: 2.6667vw;

    .item {
      box-sizing: border-box;
      width: 18.4vw;
      height: 18.4vw;
      margin: 0 auto;
      border-radius: 2.7vw;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 50%;
      }
      span {
        font-size: 3.5vw;
        color: rgba(0, 0, 0, 0.54);
        margin-top: 2vw;
      }
    }
  }
  .right {
    flex: 1;
    flex-direction: column;
    height: 60vh;
    overflow-y: auto;
    .item:nth-child(n + 2) {
      margin-top: 2.5vw;
    }
    .item {
      display: flex;
      background: #fff;
      box-sizing: border-box;
      height: 26.6667vw;
      border-radius: 2.7vw;
      width: 96%;
      margin: 0 auto;
      .leftImg {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 16vw;
          height: 16vw;
          border: 0.125vw solid #eee;
          border-radius: 2.75vw;
          padding: 2vw;
        }
      }
      .rightContent {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3.5vw 0;
        .rightTop {
          width: 100%;
          text-align: left;
          span {
            display: block;
            color: rgba(0, 0, 0, 0.87);
          }
          p {
            font-size: 3.2vw;
            color: rgba(0, 0, 0, 0.54);
            margin-top: 1.25vw;
          }
        }
        .rightBottom {
          display: flex;
          justify-content: space-between;
          padding-right: 5vw;
          span {
            color: #d81e06;
            font-size: 1.375vw;
            b {
              font-weight: bold;
              font-size: 4vw;
            }
          }
          button {
            border: none;
            width: 20vw;
            height: 5.3333vw;
            border-radius: 2.5vw;
            font-size: 2.6667vw;
            background: #b14094;
            color: #fff;
          }
        }
      }
    }
  }
}
.more {
  position: fixed;
  bottom: 15vw;
  width: 100%;
  text-align: center;
  img {
    width: 5.3333vw;
    vertical-align: middle;
    margin-left: 1vw;
  }
}
.prodetail {
  height: 60vh;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
</style>
